<template>
  <div>
    <q-scroll-area ref="scrollArea" :style="`height:${scroll_area_height}px;`">
      <q-scroll-observer @scroll="scroll_area_scroll" />
      <div
        class="row flex justify-between border-bottom panda-border panda-table-tr-like border-box text-panda-text-light q-py-xs"
        v-for="(item,index) in match_list_data"
        :key="index"
        @click="to_edit(item)"
        :class="compute_table_tr_like_class(item)"
        :style="compute_border_left_style(item)"
      >
        <div class="float-left col-5">
          <div class="row">
            <div class="col-2">
              <div class="inline-block text-center" style="width:18px;">1</div>
            </div>
            <div
              class="col-10"
              v-html="break_words_to_mulit_line_by_value(compute_table_item_show_name(item,'','homeTeamNames'))"
            ></div>
          </div>

          <div class="row">
            <div class="col-2">
              <div class="inline-block text-center" style="width:18px;">2</div>
            </div>
            <div
              class="col-10"
              v-html="break_words_to_mulit_line_by_value(compute_table_item_show_name(item,'','awayTeamNames'))"
            ></div>
          </div>
        </div>
        <q-space />
        <div class="float-right flex col-6 text-right justify-end">
          <div class="row">
            <div class="col-11">
              <div class="float-left">
                <div class>{{ compute_table_item_show_name(item,'','leagueName') }}</div>
                <div class="text-panda-text-dark">{{ compute_show_time(item) }}</div>
              </div>
            </div>
            <div class="col-1">
              <div class="vertical-top float-right" style="width:16px;">
                <div class="column" style="height:36px;">
                  <div
                    class="col-6 panda-px-2px"
                    style="line-height:22px;"
                    v-for="(it, index) in item.relatedMatch"
                    :key="index"
                  >
                    <span
                      class="panda-round-dot"
                      :style="{background: compute_dataSourceCode_col_color(it)}"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-scroll-area>
  </div>
</template>

<style>
</style>

<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import miniMatchList from "src/mixins/pages/match/miniMatchList.js";
import matchmixin from "src/mixins/pages/match/match.js";
import matchManage from "src/mixins/pages/match/matchManage.js";
// import { match_manage_tabledata } from "src/mock/match/index.js";
import match_manage_tabledata from "src/mock/match/match_manage.js";
import breakwords from "src/mixins/style/breakwords.js";
export default {
  mixins: [...mixins, matchmixin, matchManage, miniMatchList, breakwords],
  data() {
    return {
      match_list_data: [],
      tab_name: "",
      date: "",
      page: 1,
      selected_item_pool_id_all:[],
      scroll_area_height: "",
      border_left_map: {
        0: "#4A9BFF",
        1: "#50C042",
        2: "#FF4A86",
        3: "#FF4A86"
      }

      // private Integer liveOddSupport;
      /**
       * 比赛开盘标识。0：未开盘；1：开盘；2：关盘；3：封盘；开盘后用户可下注
       */
    };
  },
  props: {
    editing_obj: "",
    refresh_minilist: "",
    editing_obj_id: "" // 选择的数据 id
  },
  watch: {
    refresh_minilist() {
      if (this.refresh_minilist == 1) {
        this.init_match_list_data();
      }
    }
  },
  created() {
    this.init_match_list_data();
  },
  methods: {
    init_match_list_data() {
      let params = {};

      params = {
        // id: 0,   //编辑页面 单条查询 回显 需要
        onlyStandard: 1,
        sportId:this.sportId,
        page: this.page,
        size: 100,
        startTimeEnd: this.startTimeEnd,
        startTimeFrom: this.startTimeFrom
      };

      api_match
        .post_matchManager_queryMatch(params)
        .then(res => {
          let arr =
            this.find_value_in_obj_bypath(res, "res.data.data.records") || [];
             arr = this.rebuild_tabledata_to_needed(arr);

          this.match_list_data = this.match_list_data.concat(arr);
        });
    },
    scroll_area_scroll(info) {
      let po = this.$refs.scrollArea.getScrollPosition();
      // console.log(this.match_list_data.length);
      let len = this.match_list_data.length;
      let hall = len * 36;

      if (info.direction == "down") {
        if (
          hall > this.scroll_area_height &&
          info.position + this.scroll_area_height > hall - 100
        ) {
          this.page++;
          this.init_match_list_data();
        }
      }
    },
    compute_scrollarea_style() {
      let hs = this.window_size_info.height - 36 - 90;

      this.scroll_area_height = hs;
    },
    compute_border_left_style(item) {
      // style="border-left:4px solid #50C042;"
      let str = "";
      let val = this.border_left_map[item.operateMatchStatus];
      if (val) {
        str = `border-left:4px solid ${val};`;
      } else {
        str = `border-left:4px solid var(--q-color-panda-base-dark);`;
      }
      return str;
    },
    compute_show_time(item) {
      let value = item.beginTime;
      if (!value) {
        return "";
      }
      let time = parseInt(value) + 8 * 60 * 60 * 1000;
      let [y, m, d, h, mm, s] = this.format_date_base(time);
      let ns = new Date().getTime();
      if (time < ns) {
        return `${h}:${mm} 已开赛`;
      } else {
        return `${h}:${mm} `;
      }
    },
    to_edit(item) {
      console.log(item);
      item.is_selected = true;
      this.$emit("toedit", item);
    },
    tosearch_queryform() {}
  }
};
</script>
